<template>
	<view><label>手机号码:</label><input type="text" placeholder="please input phone." v-model="phone" /><text>{{phoneerr}}</text></view>
	<view><label>自动将小写字母装换位大写:</label><input type="text" placeholder="please input lower word." v-model="lowerword" /><text>{{upperword}}</text></view>
</template>

<script setup>
	import { ref,watch,computed } from 'vue'
	let phone=ref("")
	let phoneerr = ref('')
	watch(phone,(cur,old)=>{
		//console.info("cur is %s,old is %s",cur,old)
		let phonePattern = /^1\d{10}$/
		if(!phonePattern.test(phone.value)){
			phoneerr.value = "手机号码不是11位"
			return false
		}
		phoneerr.value = ''
		return true
	})
	// 计算属性
	let lowerword = ref("")
	let upperword = computed(()=>lowerword.value.toUpperCase())
	
	
</script>

<style>
</style>